<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>欢迎光临_vue开发的收银系统_水果店</th>
      </tr>
      <tr>
        <td>苹果{{ danjia }}￥/斤，折扣（{{ zhe }}折）</td>
      </tr>
      <tr>
        <td>
          请输入您要购买的斤数 <input type="text" v-model.number="jinshu" />
        </td>
      </tr>
      <tr>
        <td><button @click="suan">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价:{{ zong }}￥元；折后价:{{ zhehou }}元；省了:{{
            sheng
          }}￥元；
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danjia: 10,
      zhe: 0.8,
      jinshu: 0,
      zong: 0,
      zhehou: 0,
      sheng: 0,
    };
  },
  methods: {
    suan() {
      this.zong = this.jinshu * this.danjia;
      this.zhehou = this.zong * this.zhe;
      this.sheng = this.zong - this.zhehou;
    },
  },
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #93d375;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>